<!--
 * _______________#########_______________________ 
 * ______________############_____________________ 
 * ______________#############____________________ 
 * _____________##__###########___________________ 
 * ____________###__######_#####__________________ 
 * ____________###_#######___####_________________ 
 * ___________###__##########_####________________ 
 * __________####__###########_####_______________ 
 * ________#####___###########__#####_____________ 
 * _______######___###_########___#####___________ 
 * _______#####___###___########___######_________ 
 * ______######___###__###########___######_______ 
 * _____######___####_##############__######______ 
 * ____#######__#####################_#######_____ 
 * ____#######__##############################____ 
 * ___#######__######_#################_#######___ 
 * ___#######__######_######_#########___######___ 
 * ___#######____##__######___######_____######___ 
 * ___#######________######____#####_____#####____ 
 * ____######________#####_____#####_____####_____ 
 * _____#####________####______#####_____###______ 
 * ______#####______;###________###______#________ 
 * ________##_______####________####______________ 
 * 
 * @Description: 零一生是非，多态意指谁，日夜皆假寐，循环几多回，灵感袭来美，若瀑击石飞，毒虫勾心悴，一键万念灰。
 * @Author: 饶枭丰
 * @Date: 2021-07-14 10:27:55
 * @LastEditors: 饶枭丰
 * @LastEditTime: 2021-07-15 10:33:59
 -->

<template>
  <div>
    <!-- 疫情关注度 -->
    <div id="awareness"></div>
    <!-- 疫情指数 -->
    <div id="epidemicIndex"></div>
    <!-- 重要城市人均寿命与疫情 -->
    <div id="Life"></div>
    <div id="Infected"></div>
    {{ dataCI }}
  </div>
</template>

<script>
import * as echarts from "echarts";
import axios from "@/utils/axios";
export default {
  data() {
    return {
      // 玫瑰图
      dataEC: [],
      dataBJ: [],
      dataWH: [],
      dataSH: [],
      dataCI: [],
      dataYQ: [],
    };
  },
  computed: {},
  methods: {
    /**
     * @description: 获取后台接口数据
     * @param {*}
     * @return {*}后台数据
     */
    async getDrawData() {
      let res = await axios.get("/history/findAllHistory");
      this.dataCI = JSON.parse(res.data.data.dataCI);
      this.dataEC = JSON.parse(res.data.data.dataEC);
      this.dataBJ = JSON.parse(res.data.data.dataBJ);
      this.dataWH = JSON.parse(res.data.data.dataWH);
      this.dataSH = JSON.parse(res.data.data.dataSH);
      this.dataYQ = JSON.parse(res.data.data.dataYQ);
      this.draw();
    },
    draw() {
      // 疫情指数
      var dataBJ = this.dataBJ;
      var dataWH = this.dataWH;
      let dataSH = this.dataSH;
      var schema = [
        { name: "date", index: 0, text: "日" },
        { name: "AQIindex", index: 1, text: "疫情指数" },
        { name: "A类人群", index: 2, text: "A类人群" },
        { name: "B类人群", index: 3, text: "B类人群" },
        { name: "C类人群", index: 4, text: "C类人群" },
        { name: "D类人群", index: 5, text: "D类人群" },
        { name: "E类人群", index: 6, text: "E类人群" },
      ];
      var itemStyle = {
        opacity: 0.8,
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowOffsetY: 0,
        shadowColor: "rgba(0,0,0,0.3)",
      };
      // 重要城市人均寿命与疫情
      let data = this.dataYQ;
      let awareness = document.getElementById("awareness");
      let epidemicIndex = document.getElementById("epidemicIndex");
      let Life = document.getElementById("Life");
      let Infected = document.getElementById("Infected");
      let awChart = echarts.init(awareness);
      let indexChart = echarts.init(epidemicIndex);
      let lifeChart = echarts.init(Life);
      let InfectedChart = echarts.init(Infected);
      // 疫情关注度
      awChart.setOption({
        backgroundColor: "#2c343c",

        title: {
          text: "疫情关注度",
          left: "center",
          top: 20,
          textStyle: {
            color: "#fff",
          },
        },

        tooltip: {
          trigger: "item",
        },

        visualMap: {
          show: false,
          min: 80,
          max: 600,
          inRange: {
            colorLightness: [0, 1],
          },
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "50%"],
            data: this.dataEC.sort(function (a, b) {
              return a.value - b.value;
            }),
            roseType: "radius",
            label: {
              color: "rgba(255, 255, 255, 255)",
            },
            labelLine: {
              lineStyle: {
                color: "rgba(255, 255, 255, 255)",
              },
              smooth: 0.2,
              length: 10,
              length2: 20,
            },
            itemStyle: {
              color: "#c23531",
              shadowBlur: 200,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },

            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function (idx) {
              return Math.random() * 200;
            },
          },
        ],
      });
      // 疫情指数
      indexChart.setOption({
        color: ["#dd4444", "#fec42c", "#80F1BE"],
        legend: {
          top: 10,
          data: ["北京", "武汉", "上海"],
          textStyle: {
            fontSize: 16,
            color: "#fff",
          },
        },
        grid: {
          left: "10%",
          right: 150,
          top: "18%",
          bottom: "10%",
        },
        tooltip: {
          backgroundColor: ["rgba(0,0,0)"],
          formatter: function (obj) {
            var value = obj.value;
            return (
              '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">' +
              obj.seriesName +
              " " +
              value[0] +
              "日" +
              "</div>" +
              schema[1].text +
              "：" +
              value[1] +
              "<br>" +
              schema[2].text +
              "：" +
              value[2] +
              "<br>" +
              schema[3].text +
              "：" +
              value[3] +
              "<br>" +
              schema[4].text +
              "：" +
              value[4] +
              "<br>" +
              schema[5].text +
              "：" +
              value[5] +
              "<br>" +
              schema[6].text +
              "：" +
              value[6] +
              "<br>"
            );
          },
        },
        xAxis: {
          type: "value",
          name: "日期",
          nameGap: 16,
          nameTextStyle: {
            fontSize: 16,
            color: "#fff",
          },
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          max: 31,
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          name: "疫情指数",
          nameLocation: "end",
          nameGap: 20,
          nameTextStyle: {
            fontSize: 16,
            color: "#fff",
          },
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          lineStyle: {
            color: "#fff",
          },
          splitLine: {
            show: false,
          },
        },
        visualMap: [
          {
            left: "right",
            top: "10%",
            dimension: 2,
            min: 0,
            max: 250,
            itemWidth: 30,
            itemHeight: 120,
            calculable: true,
            precision: 0.1,
            text: ["圆形大小：A类人群"],
            textStyle: {
              color: "#fff",
            },
            textGap: 30,
            inRange: {
              symbolSize: [10, 70],
            },
            outOfRange: {
              symbolSize: [10, 70],
              color: ["rgba(255,255,255,0.4)"],
            },
            controller: {
              inRange: {
                color: ["#c23531"],
              },
              outOfRange: {
                color: ["#999"],
              },
            },
          },
          {
            left: "right",
            bottom: "5%",
            dimension: 6,
            min: 0,
            max: 50,
            itemHeight: 120,
            precision: "auto",
            text: ["明暗：E类人群"],
            textGap: 30,
            textStyle: {
              color: "#fff",
            },
            inRange: {
              colorLightness: [0.9, 0.5],
            },
            outOfRange: {
              color: ["rgba(255,255,255,255)"],
            },
            controller: {
              inRange: {
                color: ["#c23531"],
              },
              outOfRange: {
                color: ["#999"],
              },
            },
          },
        ],
        series: [
          {
            name: "北京",
            type: "scatter",
            itemStyle: itemStyle,
            data: dataBJ,
          },
          {
            name: "武汉",
            type: "scatter",
            itemStyle: itemStyle,
            data: dataWH,
          },
          {
            name: "上海",
            type: "scatter",
            itemStyle: itemStyle,
            data: dataSH,
          },
        ],
        backgroundColor: "#2c343c",
      });
      // 重要城市人均寿命与疫情
      lifeChart.setOption({
        backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [
          {
            offset: 0,
            color: "#2c343c",
          },
          {
            offset: 1,
            color: "#2c343c",
          },
        ]),
        title: {
          text: "3月与4月重要城市人均寿命与疫情",
          left: "5%",
          top: "3%",
          textStyle: {
            color: "#fff",
          },
        },
        legend: {
          right: "10%",
          top: "3%",
          data: ["3月", "4月"],
          textStyle: {
            fontSize: 14,
            color: "#fff",
          },
        },
        grid: {
          left: "8%",
        },
        xAxis: {
          nameTextStyle: {
            fontSize: 16,
            color: "#fff",
          },
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
            },
          },
        },
        yAxis: {
          nameTextStyle: {
            fontSize: 16,
            color: "#fff",
          },
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
            },
          },
          scale: true,
        },
        series: [
          {
            name: "3月",
            data: data[0],
            type: "scatter",
            symbolSize: function (data) {
              return Math.sqrt(data[2]) / 5e2;
            },
            emphasis: {
              focus: "series",
              label: {
                color: "#fff",
                show: true,
                formatter: function (param) {
                  return param.data[3];
                },
                position: "top",
              },
            },
            itemStyle: {
              shadowBlur: 10,
              shadowColor: "rgba(120, 36, 50, 0.5)",
              shadowOffsetY: 5,
              color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                {
                  offset: 0,
                  color: "rgb(251, 118, 123)",
                },
                {
                  offset: 1,
                  color: "rgb(204, 46, 72)",
                },
              ]),
            },
          },
          {
            name: "4月",
            data: data[1],
            type: "scatter",
            symbolSize: function (data) {
              return Math.sqrt(data[2]) / 5e2;
            },
            emphasis: {
              focus: "series",
              label: {
                show: true,
                color: "#ff3838",
                formatter: function (param) {
                  return param.data[3];
                },
                position: "top",
              },
            },
            itemStyle: {
              shadowBlur: 10,
              shadowColor: "rgba(25, 100, 150, 0.5)",
              shadowOffsetY: 5,
              color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                {
                  offset: 0,
                  color: "rgb(129, 227, 238)",
                },
                {
                  offset: 1,
                  color: "rgb(25, 183, 207)",
                },
              ]),
            },
          },
        ],
      });
      // 治愈率与感染率
      InfectedChart.setOption({
        backgroundColor: "#2c343c",
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["治愈率", "感染率"],
          textStyle: {
            fontSize: 16,
            color: "#fff",
          },
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            data: this.dataCI[0].name,
            nameTextStyle: {
              fontSize: 16,
              color: "#fff",
            },
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            nameTextStyle: {
              fontSize: 16,
              color: "#fff",
            },
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
          },
        ],
        series: [
          {
            name: "治愈率",
            type: "bar",
            color: "rgb(145,199,174)",
            data: this.dataCI[1].one,
            textStyle: {
              color: "#fff",
            },

            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
            emphasis: {
              itemStyle: {
                color: "rgba(159,218,191)",
              },
            },
          },
          {
            name: "感染率",
            type: "bar",
            color: "",
            data: this.dataCI[2].two,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
        ],
      });
    },
  },
  created() {},
  mounted() {
    this.getDrawData();
  },
};
</script>
<style>
#awareness,
#epidemicIndex,
#Life,
#Infected {
  float: left;
  width: 50%;
  height: calc((100vh - 50px) / 2);
}
</style>